<template>
    <div class="m-list">
        <ul>
            <li v-for="(item,index) in list" :class="{ active: parent_data.sessionIndex === index }" @click="select(index,item)">
                <img class="avatar"  width="30" height="30" :alt="item.name" :src="item.img">
                <p :title="item.name" class="name one-line">{{item.nickName}}</p>
                <div class="cicle" v-if="item.notRead>0">{{item.notRead}}</div>
            </li>
        </ul>
    </div>
</template>
<script>
	import $ from 'jquery';
    export default {
        props: ['userList', 'parent_data'],
        data(){
        	return {
        		currentItem:null
        	}
        },
        mounted(){
        	this.parent_data.currentItem = this.userList[0];
        },
        methods: {
            select(index,item) {
                this.parent_data.sessionIndex = index;
                this.parent_data.currentItem = item;
                let obj = this.userList[index];
                obj.notRead = 0;
                this.userList.splice(index,1,obj);
            },
        },
        computed:{
        	list(){
        		return this.userList.filter(item => item.nickName.indexOf(this.search) > -1);
        	},
        	search(){
        		return this.parent_data.search;
        	}
        }
        
    };
</script>



<style lang="less">
    .m-list {
        li {
        	font-size: 16px;
            padding: 12px 15px;
            border-bottom: 1px solid #292C33;
            cursor: pointer;
            transition: background-color .1s;
            position:relative; 
            &:hover {
                background-color: rgba(255, 255, 255, 0.03);
            }
            &.active {
                background-color: rgba(255, 255, 255, 0.1);
            }
            .name{
            	width: 200px;
            }
            .cicle{
            	width: 20px;
            	height: 20px;
            	line-height: 20px;
            	text-align: center;
            	background-color:rgb(255,81,81);
            	color: white;            	
            	border-radius: 50%;
            	position: absolute;
            	right: 20px;
            	top: 50%;
            	transform: translateY(-50%);
            }
        }
        .avatar, .name {
            vertical-align: middle;
        }
        .avatar {
            border-radius: 2px;
            height: 30px;
            width: 30px;
            display: inline-block;
        }
        .name {
            display: inline-block;
            margin: 0 0 0 15px;
        }
    }
</style>